<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    span {
        position: absolute;
        left: 500px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: skyblue;

    }
</style>
<body>

<button>点击夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>

    // 动画原理
    // 1.获得盒子当前位置
    // 2.让盒子在当前位置加上1个移动距离
    // 3.利用定时器不断重复这个操作
    // 4.加一个结束定时器的条件
    // 5.注意此元素要添加定位, 才能使用element.style.left  !!!

    var divEl = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    // var obj = {}
    // obj.name = 'tom'


    /**
     * 封装函数
     * @param obj 动画对象
     * @param posTop    top坐标
     * @param posLeft  left坐标
     * @param time  执行时间
     */
    function animate(obj, posTop, posLeft, time) {
        // 实现了给不同的元素指定了不同的定时器
        // 核心原理: 利用JS是一门动态语言, 可以很方便的给当前对象添加属性

        // bug点: 但我们不断的点击按钮, 这个元素的速度就会越来越快,
        //        因为开启太多的定时器
        // 解决方式: 让我们元素只有一个定时器执行 -> 先清除以前的定时器, 只保留当前的一个定时器执行
        clearInterval(obj.timer)
        // 1.
        let left = obj.offsetLeft;
        // top也是一个 window的内置变量吗 ?   猜测是的
        let divTop = obj.offsetTop;
        let topMove = Math.abs((posTop - divTop) / time);
        let leftMove = Math.abs((posLeft - left) / time);

        function interTime(topM, leftM) {
            if (topM !== 0 && !isNaN(topM)) {
                return topM;
            }
            if (leftM !== 0 && !isNaN(leftM)) {
                return leftM;
            }
        }

        obj.timer = window.setInterval(function () {
            if (!isNaN(posTop) && posTop !== 0) {
                if (posTop > divTop) {
                    divTop += topMove;
                } else {
                    divTop -= topMove;
                }
            }
            if (!isNaN(posLeft) && posLeft !== 0) {
                if (posLeft > left) {
                    left += leftMove;
                } else {
                    left -= leftMove;
                }
            }

            if (obj.offsetLeft === posLeft || obj.offsetTop === posTop) {
                // 停止动画 本质是停止定时器
                window.clearInterval(obj.timer);
            }
            obj.style.top = divTop + 'px';
            obj.style.left = left + 'px';
        }, interTime(topMove, leftMove));

    }

    animate(divEl, 300, 500, 1000)
    btn.addEventListener("click", function () {
        animate(span, 300, 300, 1000)
    })

</script>

</body>
</html>
